import * as React from "react";
import cityData from "../../city.json";
import { IndexBar, Button, Space, Cell, Search, IndexBarInstance } from "react-vant";
import { isNonNullExpression } from "typescript";
const Index: React.FC = () => {
  const ref = React.useRef<IndexBarInstance | null>(null)

  const handleScrollTo = (value: string) => {
    if(ref.current) {
      const s = cityData.find(v => {
        return v.citys.includes(value)
      });
      if(s) {
        ref.current.scrollTo(s.name)
      }
    }
  }
  return (
    <div>
      <Search onSearch={(value) => handleScrollTo(value)}></Search>
      <IndexBar ref={ref} highlightColor="#f00">
        {cityData.map((v, i) => {
          return (
            <div key={i}>
              <IndexBar.Anchor index={v.name} />
              {
                v.citys.map((v, i) => {
                  return   <Cell title={v} key={i}/>
                })
              }
            </div>
          );
        })}
      </IndexBar>
    </div>
  );
};

export default Index;
